https://juejin.cn/post/7462542925916258344?searchId=2025052316572319CCAA6DEC6FE638C4C3
Architecture of chrome
-
browser process, which takes user inputs, render URL bar and channel information.
-
storage process, local storage, indexed DB, cache, session storage.
-
network process,
-
render processes (multi), load resources from network process and build paint tree.
-
parse HTML, build DOM tree;
-
parse CSS, build CSSOM tree;
-
parse and execute javascript.
-
Async: once script loaded, execute;
-
Defer: Defer scripts run after the
DOMContentLoadedevent is fired. This event occurs once the HTML has been fully parsed, but before other resources like images and stylesheets are fully loaded. Maintains order. -
build the render tree,
-
reflow, build layout tree, calculate element size position; Layering.
-
paint & build the paint tree.
-
GPU process, take paint tree send to GPU.
the render process is multi thread.
The rendering process in a browser involves multiple threads to efficiently manage tasks. Here are the key threads typically involved:
1. Main Thread
- Handles HTML parsing, CSS parsing, and JavaScript execution.
- Manages the construction of the DOM, CSSOM, and render tree.
- Performs layout and painting tasks.
- controls other threads
1.1 GUI Rendering Thread
1.2 JS Engine Thread
Compositor Thread
Worker Threads
By distributing tasks across these threads, browsers can optimize rendering performance and provide a smoother user experience.